<template>
	<view class="detail">
		<navBar title="推广详情"></navBar>

		<view class="product flex_center">
			<view class="image">
				<image v-if="data.goods_image.length" :src="data.goods_image[0]" mode="aspectFill"></image>
			</view>
			<view class="text">
				<view class="name hidden">{{data.name || ''}}</view>
				<view class="price flex_r_between">
					<text>¥{{Number(data.price).toFixed(0)}}</text>
					<view>售出 {{data.order_num || 0}}</view>
				</view>
			</view>
		</view>

		<view class="activity">
			<view class="header flex_r_between" @click="onSelect">
				<view class="left">广告费返还活动</view>
				<view class="right flex_center">
					<image :src="`/static/public/select${open_return == 1 ? '_s' : ''}.png`"></image>
					<text>参与</text>
				</view>
			</view>

			<view class="activity_content">
				<!-- 	<view class="select_item">
					<image src="/static/public/select.png"></image>
					<text>
						商家自行视频带货<br />
						成交金额和订单数量满足要求，将返还100%广告费，因产品客单价及行业不同,要求的订单数量和成交额不同。
					</text>
				</view> -->

				<view class="select_item">
					<image src="/static/public/select_s.png"></image>
					<text>
						达人带货<br />
						成交金额和订单数量满足要求，将返还75%广告费，因产品客单价及行业不同,要求的订单数量和成交额不同。
					</text>
				</view>

				<view class="input_content" v-if="open_return == 1">
					<view class="title">如：达人使用1000流量，需要完成对应的订单和成交额；流量和订单，成交金额计算公式：</view>

					<view class="content_data flex_r_around">
						<view class="input flex_c">
							<input type="number" v-model="task_num" placeholder="请输入"
								placeholder-class="placeholder_style" @input="onTaskNum" />
							<text>千次曝光</text>
						</view>
						<view class="icon">
							=
						</view>
						<view class="num flex_c">
							<view>{{order_num}}</view>
							<text>订单(单)</text>
						</view>
						<view class="icon">
							+
						</view>
						<view class="num flex_c">
							<view>{{order_price}}</view>
							<text>成交额(元)</text>
						</view>
					</view>

				</view>
			</view>
		</view>

		<view class="textarea">
			<view class="header">
				<view>带货要求</view>
			</view>

			<view class="input">
				<textarea maxlength="600" placeholder-class="textarea-class" v-model="profile"
					placeholder="如：成交金额、订单数量佣金比例及达人带货所发视频的标准。建议：如达人达成目标每单最高佣金为xxxx">
				 </textarea>
			</view>
		</view>

		<view class="commission flex_center">
			<text>佣金</text>
			<input type="number" placeholder="请输入达人完成目标每单的佣金奖励" placeholder-class="placeholder" v-model="share_ratio" />
		</view>

		<view class="submit" @click="onSubmit">
			确定
		</view>

		<u-modal :show="showmodal" title="提示" content='已开始推广' confirmText="我知道了" @confirm="showmodal = false"></u-modal>

	</view>
</template>

<script>
	import navBar from '@/compentents/navBar/navBar.vue';
	export default {
		components: {
			navBar,
		},
		data() {
			return {
				// 商品数据
				data: {},

				task_num: '',

				// 是否参与
				open_return: 0,

				// 带货要求
				profile: '',
				// 佣金比例
				share_ratio: '',

				showmodal: false,

				order_num: 0,
				order_price: 0,

				flag: true,
			}
		},
		methods: {
			onSelect() {
				this.open_return = this.open_return == 1 ? 0 : 1;
			},

			onSubmit() {
				if (!this.flag) {
					return;
				}
				if (!this.share_ratio) {
					return this.$util.msg('请输入佣金奖励');
				}
				if (!this.profile) {
					return this.$util.msg('请输入带货要求');
				}
				if (this.open_return == 1) {
					if (!this.task_num) {
						return this.$util.msg('请输入曝光量');
					}
					var p = Number(this.data.price);
					var x = Number(this.task_num);
					var c = (20 / this.data.commission);
					if (p >= c) {
						var num = p / c;
						this.order_num = Math.floor(x / num);
						if (this.order_num == 0) {
							return this.$util.msg('订单或成交额不能为0，请重新输入曝光量');
						}
					} else {
						var num = Math.floor(c / p);
						this.order_num = Math.floor(num * x);
						if (this.order_num == 0) {
							return this.$util.msg('订单或成交额不能为0，请重新输入曝光量');
						}
					}
				}

				this.flag = false;
				this.$post('/popularize/savePopularize', {
					type: 5, // 达人推广
					active_ids: this.data.id, // 商品ID
					eredar_share: 1,
					share_ratio: this.share_ratio,
					profile: this.profile,
					rec_type: 1,
					open_return: this.open_return,
					task_num: this.task_num,
					pay_type: 1,
					num: this.task_num * 1000,
					account: uni.getStorageSync('account') ? uni.getStorageSync('account') : ''
				}, true, () => {
					this.flag = true;
				}).then(res => {
					this.flag = true;
					this.showmodal = true;
				});
			},

			onTaskNum(e) {

				var p = Number(this.data.price);
				var x = Number(this.task_num);
				var c = (20 / this.data.commission);


				// 2024.10.29  窦凯（孟雪） ：向下取整    
				if (p >= c) {
					var num = p / c;
					this.order_num = Math.floor(x / num);
					this.order_price = Math.floor(this.order_num * p);
				} else {
					var num = Math.floor(c / p);
					this.order_num = Math.floor(num * x);
					this.order_price = Math.floor(this.order_num * p);
				}
			},

		},

		onLoad(option) {
			this.data = JSON.parse(option.data);
		}
	}
</script>

<style lang="less" scoped>
	.detail {
		padding: 24rpx;
	}

	.product {
		padding: 16rpx 24rpx 16rpx 16rpx;
		background: #FFFFFF;
		border-radius: 24rpx;

		.image {
			width: 144rpx;
			height: 144rpx;
			background: #D8D8D8;
			border-radius: 24rpx;
			overflow: hidden;
			margin-right: 16rpx;

			image {
				width: 144rpx;
				height: 144rpx;
			}
		}

		.text {
			flex: 1;
			overflow: hidden;

			.name {
				font-size: 28rpx;
				color: #131313;
				margin-bottom: 26rpx;
			}

			.price {
				text {
					font-weight: 600;
					font-size: 36rpx;
					color: #FD2A53;
				}

				view {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}

	.activity {
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx 0;

		.header {
			height: 94rpx;
			padding: 0 32rpx;

			.left {
				font-size: 32rpx;
				color: #131313;
			}

			.right {
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}

				text {
					font-size: 32rpx;
					color: #131313;
				}
			}
		}

		.activity_content {
			padding: 24rpx;
			border-top: 2rpx solid #F1F1F1;

			.select_item {
				margin-bottom: 16rpx;
				height: 208rpx;
				background: #F1F1F1;
				border-radius: 24rpx;
				display: flex;
				align-items: flex-start;
				padding: 28rpx 24rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}

				text {
					flex: 1;
					font-size: 28rpx;
					color: #999999;
				}
			}

			.input_content {
				padding: 32rpx 24rpx;
				background: #FFEAEE;
				border-radius: 24rpx;

				.title {
					font-size: 28rpx;
					color: #FD2A53;
				}

				.content_data {
					margin-top: 24rpx;

					.input {
						height: 114rpx;
						justify-content: space-between;

						input {
							width: 156rpx;
							height: 64rpx;
							background: #FFFFFF;
							border-radius: 12rpx;
							font-size: 28rpx;
							color: #333;
							padding: 0 16rpx;
							box-sizing: border-box;
						}

						text {
							font-size: 24rpx;
							color: #999999;
						}

						.placeholder_style {
							color: #999999;
						}
					}

					.num {
						height: 114rpx;
						justify-content: space-between;

						view {
							height: 64rpx;
							line-height: 64rpx;
							font-weight: 600;
							font-size: 32rpx;
							color: #000000;
						}

						text {
							font-size: 24rpx;
							color: #999999;
						}
					}
				}
			}
		}


	}

	.textarea {
		background: #FFFFFF;
		border-radius: 24rpx;

		.header {
			view {
				width: 190rpx;
				height: 64rpx;
				background: linear-gradient(137deg, #FE58D1 0%, #FD2A53 100%);
				box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(253, 49, 102, 0.5);
				border-radius: 24rpx 16rpx 32rpx 0rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: center;
			}
		}

		.input {
			padding: 40rpx 24rpx 20rpx;

			textarea {
				font-weight: 400;
				font-size: 28rpx;
				color: #333;
				line-height: 48rpx;
			}

			.textarea-class {
				color: #CCCCCC;
			}
		}
	}

	.commission {
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 32rpx;
		margin-top: 20rpx;

		text {
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
			margin-right: 16rpx;
		}

		input {
			flex: 1;
			font-size: 28rpx;
			color: #333;
			text-align: right;
		}

		.placeholder {
			color: #CCCCCC;
		}
	}

	.submit {
		margin-top: 42rpx;
		height: 96rpx;
		background: #FD2A53;
		border-radius: 48rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
	}
</style>